/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:45:31
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-13 14:09:05
 */

'use strict';

(function() {

	var Y = window.Y || {}


	Y.chart_bar_teamchange = function(setting) {

		var selector = setting.selector,
			series = setting.series,
			colorset = setting.colorset,
			textStyle = setting.textStyle,
			circleStyle = setting.circleStyle,
			rectStyle = setting.rectStyle,
			backStyle = setting.backStyle,
			width = document.querySelector(selector).offsetWidth,
			height = document.querySelector(selector).offsetHeight,
			margin = setting.margin,
			tickValues = []


		var svg = d3.select(selector)
			.append('svg')
			.attr('width', width)
			.attr('height', height)

		var xScale = d3.scale.linear()
			.domain([0, d3.max(series, function(d) {

				return (d['value'] + 30)
			})])
			.range([0, width - margin.top - margin.bottom])

		for (var i = 0; i < series.length; i++) {

			var value = series[i]['name'].substring(0, 1)

			tickValues.push(value)
		}

		var yScale = d3.scale.ordinal()
			.domain(tickValues)
			.rangeBands([0, height - margin.left - margin.right], 0.6)

		var yAxis = d3.svg.axis()
			.scale(yScale)
			.tickValues(tickValues)
			.orient('left')
			.tickSize(6, 0)

		svg.append('g')
			.attr('class', 'yAxis')
			.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
			.call(yAxis)

		svg.select('.yAxis').selectAll('path')
			.attr('fill', 'none')
			.attr('stroke', '#CCD4D4')
			.attr('stroke-width', 1)

		svg.select('.yAxis').selectAll('text')
			.style('font-size', textStyle.fontSize)
			.style('font-weight', textStyle.fontWeight)

		var back = svg.append('g')
			.attr('class', 'mback')

		var con = svg.append('g')
			.attr('class', 'mcon')

		var circle = svg.append('g')
			.attr('class', 'mcircle')

		back.selectAll('rect')
			.data(series)
			.enter()
			.append('rect')
			.attr('x', margin.left)
			.attr('y', function(d, i) {

				return yScale(d['name'].substring(0, 1)) + margin.top
			})
			.attr('height', yScale.rangeBand() / 2)
			.attr('fill', backStyle.fill)
			.attr('width', width - margin.left - margin.right)
			.attr('cursor', 'pointer')

		con.selectAll('rect')
			.data(series)
			.enter()
			.append('rect')
			.attr('x', margin.left)
			.attr('y', function(d, i) {

				return yScale(d['name'].substring(0, 1)) + margin.top
			})
			.attr('height', yScale.rangeBand() / 2)
			.attr('width', 0)
			.attr('fill', rectStyle.fill)
			.transition()
			.duration(1500)
			.attr('width', function(d, i) {

				return xScale(d['value'])
			})
			.attr('cursor', 'pointer')

		circle.selectAll('circle')
			.data(series)
			.enter()
			.append('circle')
			.attr('cx', function(d, i) {

				return xScale(d['value']) + margin.left
			})
			.attr('cy', function(d, i) {

				return yScale(d['name'].substring(0, 1)) + margin.bottom + 3
			})
			.attr('r', 10)
			.attr('fill', circleStyle.fill)
			.attr("stroke", colorset[2])

		circle.selectAll('text')
			.data(series)
			.enter()
			.append('text')
			.attr('x', function(d, i) {

				return xScale(d['value']) + margin.left
			})
			.attr('y', function(d, i) {

				return yScale(d['name'].substring(0, 1)) + margin.bottom + yScale.rangeBand() / 4
			})
			.text(function(d) {

				return d['value']
			})
			.style('font-size', textStyle.fontSize)
			.style('font-weight', textStyle.fontWeight)
			.attr('text-anchor', 'middle')
			.attr('dy', '0.35em')



	}

	// 后面为调用部分


	window.Y = Y

}())